<template>
	<view class="base">
		<list header="基本使用"></list>
		<view class="indexbar">
			<index-bar :items="items" />
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				basicVisible: false,
				animation: true,
				scrollVisible: false,
				closeVisible: false,
				position: ""
			};
		},
		onLoad() {
			this.form = new Form({
				rules: {
					imageList: [{
						required: true,
						message: '需要上传图片'
					}, () => ({
						async validator(_, fileList = []) {
							if (fileList.length !== 5) {
								throw new Error('需要上传5张图片');
							}
							if (fileList.find(file => file.status !== 'done')) {
								throw new Error('图片需要上传完成');
							}
						}
					})]
				}
			});
		},
		onLoad() {
			this.form = new Form();
		},
		methods: {
			handlePopupClose() {
				this.setData({
					basicVisible: false,
					scrollVisible: false,
					closeVisible: false
				});
			},

			handleShowBasic(e) {
				const {
					position
				} = e.target.dataset;
				this.setData({
					position,
					basicVisible: true
				});
			},

			handleShowScroll() {
				this.setData({
					scrollVisible: true
				});
			},

			handleChangeAnimation(checked) {
				this.setData({
					animation: checked
				});
			},

			handleShowClose() {
				this.setData({
					closeVisible: true
				});
			},

			handleRef(ref) {
				this.form.addItem(ref);
			},

			reset() {
				this.form.reset();
			},

			async submit() {
				const values = await this.form.submit();
				console.log(values);
				uni.alert({
					title: '提交',
					content: JSON.stringify(values)
				});
			},

			onUpload(localFile) {
				return new Promise(resolve => {
					console.log('上传的图片为：', localFile);
					setTimeout(() => {
						resolve(
							'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ');
					}, 2000);
				});
			}
		}
	};
</script>
<style>

</style>